<template>
  <view style="width: 100%">
    <u--input
      v-model="valueName"
      @click.native="showPicker"
      :placeholder="placeholder"
      :placeholderClass="placeholderClass"
      :placeholderStyle="placeholderStyle"
      :inputAlign="inputAlign"
      :fontSize="fontSize"
      :color="color"
      :prefixIcon="prefixIcon"
      :prefixIconStyle="prefixIconStyle"
      :suffixIcon="suffixIcon"
      :suffixIconStyle="suffixIconStyle"
      :border="border"
      :shape="shape"
      :customStyle="customStyle"
      disabled
			cursorSpacing="100"
      :disabledColor="disabledColor"
    />
    <u-datetime-picker
      :show="pickerShow"
      :minDate="minDate"
      :maxDate="maxDate"
      closeOnClickOverlay
      v-model="timeValue"
      :mode="mode"
			:formatter="formatter"
      @confirm="chooseItem"
			:minHour="minHour"
			:maxMinute="maxMinute"
			:maxHour="maxHour"
			:minMinute="minMinute"
      @close="pickerShow = false"
      @cancel="pickerShow = false"
    ></u-datetime-picker>
  </view>
</template>
<script>
import moment from 'moment'
export default {
  data() {
    return {
      pickerShow: false, //picker选择器状态
      valueName: '', //所选id 值参数
      timeValue: '',
    }
  },
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    value: {
      type: [String, Number],
      default: '',
    },
		minDate: {
			type: [ Number],
			default: 315504000000,
		},
		maxDate: {
			type: [ Number],
			default: (new Date(new Date().getFullYear() + 10, new Date().getMonth(), new Date().getDate())).getTime(),
		},
		minHour: {
			type: [ Number],
			default: 0,
		},
		maxHour: {
			type: [ Number],
			default: 23,
		},
		minMinute: {
			type: [ Number],
			default: 0,
		},
		maxMinute: {
			type: [ Number],
			default: 59,
		},
		
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    // 输入框为空时的占位符
    placeholder: {
      type: [String, Number],
      default: '请选择日期',
    },
    mode: {
      type: [String],
      default: 'date',
    },
    // 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/
    placeholderClass: {
      type: [String],
      default: '',
    },
    // 指定placeholder的样式，字符串/对象形式，如"color: red;"
    placeholderStyle: {
      type: [String, Object],
      default: 'color: #C0C4CC'
    },
    // 输入框内容对齐方式 - left | center | right
    inputAlign: {
      type: [String],
      default: 'left',
    },
    // 输入框字体的大小
    fontSize: {
      type: [String, Number],
      default: '15px',
    },
    // 输入框字体颜色
    color: {
      type: [String],
      default: '#303133',
    },
    // 输入框前置图标
    prefixIcon: {
      type: [String],
      default: '',
    },
    // 前置图标样式，对象或字符串
    prefixIconStyle: {
      type: [String, Object],
      default: '',
    },
    // 输入框前置图标
    suffixIcon: {
      type: [String],
      default: 'calendar-fill',
    },
    // 前置图标样式，对象或字符串
    suffixIconStyle: {
      type: [String, Object],
      default: 'color:#B2B2B2',
    },
    // 边框类型，surround-四周边框，bottom-底部边框，none-无边框
    border: {
      type: [String],
      default: 'surround',
    },
    // 输入框形状，circle-圆形，square-方形
    shape: {
      type: [String],
      default: 'square',
    },
    customStyle: {
      type: [Object],
      default: () => {},
    },
		formatter: {
			type: [Object,Function],
			default: (type,value) => {
				return value
			}
		},
		format: {
			type: [String],
			default: 'yyyy-mm-dd hh:MM:ss',
		}
  },
  watch: {
    value: {
      handler: function (newData) {
        //处理数据
        if (newData) {
          this.valueName = newData
					this.timeValue = Number(new Date(newData))
        } else {
					if (this.mode == 'time') {
						this.valueName = newData
						this.timeValue = ''
					} else {
						this.valueName = newData
						this.timeValue = Number(new Date())
					}
        }
      },
      immediate: true,
			deep: true
    },
  },
  computed: {
    // 当是disabled为true改变禁用的颜色
    disabledColor() {
      if (this.disabled) {
        return '#f5f7fa'
      } else {
        return '#FFFFFF'
      }
    },
  },
  methods: {
    //点击展示
    showPicker() {
      if (this.disabled) return false
      this.pickerShow = true
    },
    chooseItem(val) {
      const timeFormat = uni.$u.timeFormat
      this.pickerShow = false
      if (this.mode == 'date') {
        this.valueName = timeFormat(val.value, 'yyyy-mm-dd')
        this.$emit('change', timeFormat(val.value, 'yyyy-mm-dd'))
      } else if (this.mode == 'year-month') {
        this.valueName = timeFormat(val.value, 'yyyy-mm')
        this.$emit('change', timeFormat(val.value, 'yyyy-mm'))
      } else if (this.mode == 'time') {
        this.valueName = val.value
        this.$emit('change', val.value)
      } else {
				this.valueName = timeFormat(val.value, this.format)
				this.$emit('change', timeFormat(val.value, this.format))
			}
    },
  },
}
</script>
